<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui_font.css" />
    <link rel="stylesheet" type="text/css" href="../../css/news.css" />
    <link rel="stylesheet" type="text/css" href="../../css/frame3.css" />
    <style>
        html,
        body {
            background-color: #fff;
        }
        
     .se1{
         padding: 25px 17px 17px;
         display: flex;
         justify-content: space-between;
         align-items: center;
     }
     .type{
         margin-right: 38px;
         font-size: 17px;
         color: #666666;
     }
    .on{
        font-size: 18px;
         color: #333333;
    }
    .search{
        width: 20px;
        margin-right: 25px;
    }
    .se2{
       padding: 0 17px;
    }
    .lei{
        color: #999;
        font-size: 13px;
        margin-right: 35px;
    }
    .active{
        font-size: 12px;
        background-color: #ead4fc;
        border-radius: 100px;
        padding: 1px 6px;
    }
    .container{
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      height: 1000px;
    }
    .item{
      width: 50%;
      position: relative;
      box-sizing: border-box;
      padding: 0 1%;
      counter-increment: itemCount;
      position: relative;
    }
    .item .img{
      width: 100%;
      height: auto;
      display: block;
      border-radius: 10px;
    }
    .item::after{
      position: absolute;
      height: 30px;
      line-height: 30px;
      width: 30px;
      text-align: center;
      background-color: #000;
      color: #fff;
      top: 10px;
      left: 10px;
      content: counter(itemCount);
    }
    .info{
        width: calc(100% - 20px);
        padding: 5px 10px;
        position: absolute;
        left: 0;
        bottom: 0;
    }
   .msg{
       color: #FCFBFB;
       font-size: 13px;
   }
   .las{
       margin-top: 4px;
       display: flex;
       justify-content: space-between;
       align-items: center;
   }
   .lal{
        display: flex;
       justify-content: flex-start;
       align-items: center;
   }
   .lal span{
        color: #FAF9F9;
        font-size: 10px;
        margin-left: 5px;
   }
   .tou{
       width: 25px;
       height: 25px;
       border-radius: 100px ;

   }
    </style>
</head>

<body>
    <div id="view">
        <div class="se1">
            <div>
                <span class="type on">推荐</span>
                <span class="type">交友</span>
            </div>
            <div>
                <img src="../../image/zhibo/search.png" class="search"/> 

                <img src="../../image/zhibo/zuan.png" class="zuan"/> 

            </div>
        </div>
       <div class="se2">
           <span class="lei active">热门</span>
           <span class="lei">最新</span>
           <span class="lei">关注</span>
           <span class="lei">附近</span>
       </div>

       <div class="container">
        <div class="item">
            <img src="https://picsum.photos/360/260?random=1" class="img">
            <div class="info">
                <p class="msg">{{msg.length > 11 ? msg.slice(0, 11) + '...' : msg }}</p>
                <div class="las">
                    <div class="lal">
                        <img src="../../image/zhibo/shipin.png" class="tou"/>
                        <span>haha</span>
                    </div>
                    <div class="lal">
                        <img src="../../image/zhibo/bofang.png" class="bofang"/>
                        <span>12</span>
                    </div>
                </div>
            </div>
          </div>
          <div class="item">
            <img src="https://picsum.photos/360/320?random=2" class="img">
          </div>
          <div class="item">
            <img src="https://picsum.photos/360/320?random=16" class="img">
          </div>
          <div class="item">
            <img src="https://picsum.photos/360/420?random=3" class="img">
          </div>
          <div class="item">
            <img src="https://picsum.photos/360/420?random=4" class="img">
          </div>
          <div class="item">
            <img src="https://picsum.photos/360/480?random=5" class="img">
          </div>
          <div class="item">
            <img src="https://picsum.photos/360/500?random=16" class="img">
          </div>
       </div>
       
           
    </div>
    <script type="text/javascript" src="../../script/api.js"></script>
    <script type="text/javascript" src="../../script/jquery.js"></script>
    <script type="text/javascript" src="../../script/ffkj.js"></script>
    <script type="text/javascript" src="../../script/vue.js"></script>
    <script type="text/javascript" src="../../script/update.js"></script>
    <script type="text/javascript">
        var view = new Vue({
            el: '#view',
            data: {
                ffInfo: {},
                ios: 1, // 1上架 0非上架
                version: '0.0.1',
                msg: '3文字模板文字模板文字模板11111232'
            },
            methods: {
                _url(param, url) {
                    _url(param, url);
                },
                // 返回图片路径
                returnImg(url) {
                    return returnImg(url);
                },
            }
        })
        // apiready = function() {
        //     view.ios = $api.getStorage('shang');
        //     //APP版本
        //     view.version = api.appVersion
        // }

        // function callservice(v) {
        //     api.call({
        //         type: 'tel_prompt',
        //         number: v
        //     });
        // }
    </script>
</body>

</html>